// 个人资源样式
.recording-box {
  height: 100%;

  .select {
    width: 100%;
    height: 30px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;

    .left-s {
      float: left;

      span {
        font-size: 16px;
      }
    }

    .right-s {
      line-height: 32px;
      float: right;

      .el-button+.el-button {
        margin-left: 15px;
      }

      .search-input {
        display: inline-block;
        display: flex;

        .buttons {
          display: inline-block;
          margin-left: 15px;
          width: 220px;
        }
        .but{
          align-self: baseline;
        }
      }
    }
  }

  .content {
    width: 100%;
    height: 84%;
    overflow-y: auto;

    /*滚动条样式 */
    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border-radius: 4px;
    }

    &:hover::-webkit-scrollbar-thumb {
      background: #536597;
    }

    &:hover::-webkit-scrollbar-track {
      // background: hsla(0, 0%, 53%, 0.1);
      background: #536597;
    }

    .dataList-box {
      width: 3.7rem;
      height: 3.55rem;
      background-color: #172449;
      margin: 0 15px 11px 0;
      float: left;
      position: relative;

      .main-part {
        width: 3.7rem;
        height: 2.1rem;
        position: relative;
        cursor: pointer;

        .videoImg {
          width: 100%;
          height: 100%;

          img {
            width: 100%;
            height: 100%;
          }
        }

        // 状态 类型 时长 审核
        .case1,
        .case2,
        .case4 {
          position: absolute;
          width: 0.9rem;
          height: 0.28rem;
          line-height: 0.28rem;
          text-align: center;
          color: #eef5ff;
          font-size: 0.16rem;
          border: 1px solid #fff3eb;
        }

        .case1 {
          top: 0.07rem;
          left: 0.04rem;
          background-color: #367edf;
        }

        .case2 {
          top: 0.07rem;
          right: 0.04rem;
          background-color: #df7636;
        }

        .case3 {
          width: 0.8rem;
          height: 0.2rem;
          line-height: 0.2rem;
          font-size: 0.14rem;
          text-align: center;
          position: absolute;
          left: 0.05rem;
          bottom: 0.07rem;
          background-color: #000;
          opacity: 0.7;
        }

        .case4 {
          right: 0.04rem;
          bottom: 0.07rem;
          background-color: #367edf;
        }

        //蒙版
        .mask {
          position: absolute;
          width: 3.7rem;
          height: 2.1rem;
          left: 0;
          top: 0;
          background: #000;
          opacity: 0;
          z-index: 88;
        }

        .videoError {
          position: absolute;
          width: 3.7rem;
          height: 2.1rem;
          left: 0;
          top: 0;
          z-index: 89;
          font-size: 16px;
          font-weight: 500;
          text-align: center;
          background-color: rgba(0, 0, 0, 0.65);

          .error {
            width: 46px;
            height: 46px;
            z-index: 90;
            margin: 0.57rem auto 10px;
            background: url("~@/assets/images/ico_zhuanmashibai.png") no-repeat;
          }

          span {
            color: #ff6868;
          }
        }

        &:hover .mask {
          opacity: 0.26;
        }
      }

      // 视频标题
      .videoTip {
        width: 3.7rem;
        height: 1.03rem;
        position: relative;
        box-sizing: border-box;
        line-height: 0.35rem;
        padding: 0.2rem 0.18rem;

        .tip {
          color: #eef5ff;
          font-size: 14px;
        }

        .collect {
          width: 0.24rem;
          height: 0.24rem;
          position: absolute;
          right: 26px;
          bottom: 10px;
          cursor: pointer;
          z-index: 99;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      // 详情等
      .bottom-box {
        width: 100%;
        height: 0.4rem;
        background-color: #2c385c;
        display: flex;

        .detailItem,
        .deleteItem,
        .screenshot,
        .checkItem,
        .checkItem1 {
          flex-grow: 1;
          font-size: 0.18rem;
          width: 1rem;
          height: 0.2rem;
          line-height: 0.2rem;
          margin: 0.08rem 0;
          text-align: center;
          color: #b8cae5;
          padding: 0.03rem;
          cursor: pointer;

          i {
            margin-right: 4px;
          }
        }

        div:not(:first-child) {
          border-left: 1px solid #eee;
        }

        .detailItem {
          &:hover {
            color: #7b6dfd;
          }
        }

        .deleteItem {
          &:hover {
            color: #f53838;
          }
        }

        .screenshot {
          &:hover {
            color: #47f3f2;
          }
        }

        .checkItem {
          &:hover {
            color: #47f3f2;
          }

          &:before {
            content: "";
            display: inline-block;
            height: 0.18rem;
            width: 0.17rem;
            background: url("~@/assets/images/shenhe.png") no-repeat;
            background-size: 100%;
          }

          &:hover:before {
            content: "";
            display: inline-block;
            height: 0.18rem;
            width: 0.17rem;
            background: url("~@/assets/images/shenheclick.png") no-repeat;
            background-size: 100%;
          }
        }

        .checkItem1 {
          &:hover {
            color: #47f3f2;
          }

          &:before {
            content: "";
            display: inline-block;
            height: 0.18rem;
            width: 0.17rem;
            background: url("~@/assets/images/cheshen.png") no-repeat;
            background-size: 100%;
          }

          &:hover:before {
            content: "";
            display: inline-block;
            height: 0.18rem;
            width: 0.17rem;
            background: url("~@/assets/images/cheshenclick.png") no-repeat;
            background-size: 100%;
          }
        }
      }

      // 遮罩层
      .maskAll {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 3.56rem;
        background-color: rgba(0, 0, 0, 0.15);
        z-index: 101;
        cursor: pointer;

        .xuan {
          width: 0.6rem;
          height: 0.6rem;
          font-size: 0.32rem;
          color: #fff;
          position: absolute;
          z-index: 102;
          cursor: pointer;
          top: 30px;
          left: 20px;
        }
      }
    }
  }

  .pagination {
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }

  // 收藏弹框
  .shou {
    color: #fff;
    width: 100%;
    text-align: center;
  }

  // 详情弹框
  .detail-video {
    .detail-box {
      width: 100%;
      height: 6rem;
      display: flex;
      justify-content: space-evenly;

      .left-con {
        width: 4.4rem;
        height: 100%;
        padding: 20px 10px 10px;
        box-sizing: border-box;
        border-right: 0.01rem solid #172449;

        .imgShow {
          width: 3.9rem;
          height: 2.08rem;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .item {
          margin-top: 0.25rem;
          font-size: 15px;

          .title {
            color: #7fdbfd;
            display: inline-block;
            width: 120px;

            i {
              margin-right: 10px;
            }
          }

          .con {
            color: #fff;
          }
        }
      }

      .right-con {
        width: 6.3rem;
        height: 100%;
        padding: 20px 10px 10px;

        .content {
          width: 100%;
          height: 4.6rem;
          color: #fff;

          .el-input__inner {
            width: 100% !important;
          }
        }

        .content1 {
          width: 100%;
          height: 100%;
          color: #fff;
        }

        .dialog-footer {
          text-align: center;
          margin-left: 90px;
          margin-top: 15px;
        }
      }
    }
  }
}
// 无内容 空
.nodataDiv {
  width: 100%;
  height: 84%;
  display: flex;
  justify-content: center;
  align-items: center;

  .nodata {
    width: 130px;
    height: 103px;
    background: url("~@/assets/images/bg_kongbaiye@2x.png") no-repeat;
    background-size: 100% 100%;
  }

  .nodataText {
    width: 130px;
    text-align: center;
    color: #40485e;
    font-weight: bold;
    margin-top: 15px;
  }
}